<template>
  <div class="app-container">
    <div class="content">
      <div class="lgm-search">
        <el-form
          ref="form"
          :model="searchParams"
          label-width="80px"
          class="search-form"
        >
      
          <el-form-item label="扫菲日期">
            <el-date-picker
              v-model="searchParams.time1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="统计类型">
            <el-select v-model="searchParams.type" placeholder="请选择统计类型">
              <el-option
                v-for="item in tjType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="款号">
            <el-input
              v-model="searchParams.style_no"
              placeholder="请输入款号"
            ></el-input>
          </el-form-item>
          <el-form-item label="床次">
            <el-input
              v-model="searchParams.cutting_bed_id"
              placeholder="请输入床次"
            ></el-input>
          </el-form-item>
          <el-row style="display: flex; height: 40px">
            <el-button
              type="success"
              class="lgm-search-btn"
              icon="el-icon-search"
              @click="seach"
              >搜索</el-button
            >
            <el-button
              class="lgm-reset-btn"
              icon="el-icon-refresh"
              @click="reset"
              >重置</el-button
            >

            <!-- <div style="margin-left: 10px">
              <download-excel
                ref="export"
                class="export-excel-wrapper"
                :data="dataList"
                :fields="json_fields"
                header="生产统计"
                name="生产统计.xls"
              >
                <el-button type="success">
                  <el-image
                    :src="require('@/assets/images/export.png')"
                    class="export-icon"
                  ></el-image>
                  导出
                </el-button>
              </download-excel>
            </div> -->
          </el-row>
        </el-form>
      </div>

      <div class="table">
        <el-table
          :data="dataList"
          border
        >
          <el-table-column
            prop="id"
            label="床次"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="style_no"
            label="款号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="num"
            label="总件数"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="lgm-page-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[10, 100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import { production_static } from "@/api/admin";
import DownloadExcel from "vue-json-excel";
export default {
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      searchParams: {
        cutting_bed_id: "",
        style_no: "",
        cutting_bed_id: "",
        type: "",
      },
      departmentList: [
        
      ],
      tjType: [
        { value: "1", label: "裁床统计" },
        { value: "2", label: "生成汇总" },
        { value: "3", label: "按床数" },
        { value: "4", label: "按款号" },
      ],
      dataList: [  ],
      json_fields: {
        床次: "cc",
        款号: "kh",
        总件数: {
          field: "total",
          // 使用自定义的表头样式
          header: {
            style: "text-align: center",
          },
          // 使用自定义的单元格样式
          cell: {
            style: "text-align: center",
          },
        },
      },
    };
  },
  components: {
    "download-excel": DownloadExcel,
  },
  mounted() {
    this.production_staticFn();
  },
  methods: {
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    production_staticFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
     
      production_static( {
          page: this.page,
          page_size: this.page_size,
          ...obj,
        }).then((e) => {
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
    handleSizeChange(value) {
      this.page_size = value;
      this.production_staticFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.production_staticFn();
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.seach()
      
    },
    seach() {
      this.page = 1;
      this.production_staticFn();
    },
    clickItem() {
      console.log(456);
    },
    summary(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
  }

  .table {
    .flex {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;

      ::v-deep button {
        margin: 0;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
